<template>
  <div style="display:flex">
      <el-upload action="string"
          list-type="picture-card"
          accept=".jpg,.jpeg,.png,.bmp"
          :on-preview="handlePictureCardPreview"
          :before-upload="onBeforeUploadImage"
          :http-request="UploadImagePic"
          :file-list="thumbnailList"
          :on-exceed="onExceedPic"
          :on-remove="onRemovePic"
          class="up-file-upload"
          :class="{
            'is-max': imgUrl
          }"
          :limit="1">
          <i class="el-icon-plus"></i>
          <div class="el-icon-text">{{uploadText}}</div>
      </el-upload>
  </div>
</template>
<script>
import Uploader from 'packages/BaseUpload/uploader';
export default {
  name: 'up-file',
  props: {
    file: {
      type: Array,
      default: () => [],
    },
    //点击上传的文案不一样
    uploadText:String,
    //是否应用
    judgeSize:Boolean,
    imgUrl: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      thumbnailList: this.imgUrl ? [{url: this.imgUrl}] : []
    }
  },
  watch:{
    // imgUrl:{
    //   immediate: true,
    //   handler(url) {
    //     console.log(url, 11122)
    //     !url && this.thumbnailList.pop();
    //     url && this.$set(this.thumbnailList, '0', {url})
    //     // this.thumbnailList.pop();
    //     // url && this.thumbnailList.push({url});
    //   }
    // }
  },
  methods: {
    onRemovePic (o, a) {
      this.thumbnailList.splice(0, 1)
      this.$emit('removePic', [o, a])
    },
    onExceedPic () {
      this.$message.error('最多上传1张图片!');
    },
    UploadImagePic (param) {
      Uploader.upload(param.file, '/files/upload')
        .then((result) => {
          if (result.status != 0) {
            this.$message({
              message: `${result.message}`,
              duration: 1500,
              type: 'error',
            });
            return;
          }
            let file = result.data;
            let item = {
              id: file.id,
              uid: param.file.uid,
              url:  file.ossUrl || file.url || `/files/get?fileId=${file.id}`,
              status: "success",
              fileSize: file.fileSizeStr,
              filename: file.fileName,
            }
            this.$emit('productMg',item)
        })
        .catch((err) => {
          console.warn(err);
        })
        .finally(() => { });
    },
  
    onBeforeUploadImage (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
      const isLt200M = file.size / 1024 / 1024 < 200;
      if (!isJPG) {
        this.$message.error('上传图片只能是 jpg/png/jpeg/bmp 格式!');
      }
      if (!isLt200M) {
        this.$message.error('上传图片大小不能超过 200M!');
      }
      // this.isSize(file)
      // this.fileList.push(file);
      return isJPG && isLt200M;
    },
    handlePictureCardPreview (file) {
      this.$previewElementImg(file.url);
    },
  },
}
</script>
<style  lang="scss" scoped>
  ::v-deep .el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 104px;
    height: 104px;
    margin: 0 8px 8px 0;
    display: inline-block;
  }
  ::v-deep .el-upload--picture-card {
      width: 104px;
      height: 104px;
      background-color: #f5f5f5;
      border: 1px solid #D9D9D9;
      border-radius: 4px;
      text-align: center;
      line-height: 50px;
      i {
          font-size: 24px;
          color: #8c939d;
      }
      .el-icon-plus{
        display: block;
        margin: 28px auto 0 ;
      }
      .el-icon-text{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #595959;
        line-height: 22px;
      }
  }
  ::v-deep .el-upload {
      display: inline-block;
      outline: 0;
  }
  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #D9D9D9;
  }
  .el-upload-listImg{
      width: 104px;
      height: 104px;
      border-radius: 4px;
      display: inline-block;
      margin-right: 10px;
  }
  ::v-deep .up-file-upload.is-max {
    .el-upload {
      display: none;
    }
  }
</style>
